<template>
  <!-- 创建事件 -->
  <h-modal class="event-modal" v-model.lazy="show" title="创建事件" @submit="createEvents">
    <a-form-model
      ref="form"
      layout="horizontal"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="form"
      :rules="rules"
      labelAlign="left"
      size="large">
      <a-row :gutter="50">
        <a-col :span="12">
          <a-form-model-item label="事件标题" prop="title" class="custom-label">
            <a-input v-model.lazy="form.title" :maxLength="50" placeholder="请输入事件标题" @blur="blurTitle"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="事件类型" class="custom-label" prop="eventType">
            <a-select v-model.lazy="form.eventType" placeholder="请选择事件类型">
              <a-select-option :value="0">处置事件</a-select-option>
              <a-select-option :value="1">观察事件</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="事件属性" prop="isOnline" class="custom-label">
            <a-select v-model.lazy="form.isOnline" placeholder="请选择事件属性">
              <a-select-option :value="0">线上事件</a-select-option>
              <a-select-option :value="1">线下事件</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-model-item label="标签选择">
            <a-select style="width: 35%" v-model.lazy="form.type" placeholder="请选择标签">
              <a-select-option value="1">涉政治类</a-select-option>
            </a-select>
            或
            <a-input style="width: 35%" v-model.lazy="form.typeText" placeholder="手动输入"></a-input>
          </a-form-model-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-model-item label="事件属地" prop="address" class="custom-label">
            <!-- <a-select v-model.lazy="form.address" placeholder="请选择事件属地">
              <a-select-option value="1">鄞州</a-select-option>
            </a-select> -->
            <!-- <a-input v-model.lazy="form.address" :maxLength="50" placeholder="输入事件属地"></a-input> -->
            <a-select v-model="form.address" placeholder="请选择">
              <a-select-option v-for="item in address" :value="item.title" :key="item.title">{{ item.title }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="提醒接收对象" prop="" class="custom-label">
            <a-select mode="multiple" v-model="form.mobile" placeholder="请选择">
              <a-select-option v-for="item in leader" :value="item.mobile" :key="item.realname">{{ item.realname }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="周期选择" class="custom-label">
            <a-select placeholder="请选择" v-model="form.dataCycle">
              <a-select-option :value="1">1</a-select-option>
              <a-select-option :value="3">3</a-select-option>
              <a-select-option :value="5">5</a-select-option>
              <a-select-option :value="7">7</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-model-item label="办理状态" prop="transactStatus">
            <a-select v-model.lazy="form.transactStatus" placeholder="请选择办理状态">
              <a-select-option :value="0">协办</a-select-option>
              <a-select-option :value="1">查办</a-select-option>
              <a-select-option :value="2">督办</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col> -->
        <!-- <a-col :span="12">
          <a-form-model-item label="事件级别" prop="eventLevel">
            <a-radio-group buttonStyle="solid" v-model.lazy="form.eventLevel">
              <a-radio-button :value="0">普通</a-radio-button>
              <a-radio-button :value="1">重点</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-model-item label="事件等级" prop="eventGrade" class="custom-label">
            <a-radio-group buttonStyle="solid" v-model.lazy="form.eventGrade">
              <a-radio-button :value="0">一般预警</a-radio-button>
              <a-radio-button class="radio-button-yellow" :value="1">重要预警 </a-radio-button>
              <a-radio-button class="radio-button-orange" :value="2">紧急预警</a-radio-button>
              <!-- <a-radio-button class="radio-button-red" :value="3">特级预警</a-radio-button> -->
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-model-item label="下发区县市网信办部门">
            <a-select mode="multiple" v-model.lazy="departIdListIn" placeholder="请选择下发部门">
              <a-select-option :value="item.id" v-for="(item) in deptArr" :key="item.id">{{ item.depart }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="下发市级部门">
            <a-select mode="multiple" v-model.lazy="departIdListOut" placeholder="请选择下发部门">
              <a-select-option :value="item.id" v-for="(item) in deptArrOut" :key="item.id">{{ item.depart }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col> -->
        <a-col :span="24">
          <a-form-model-item label="事件描述" prop="content">
            <a-textarea v-model.lazy="form.content" placeholder="请输入事件描述" :rows="3"></a-textarea>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="12">
          <a-form-model-item label="事件创始人">
            <a-input v-model.lazy="form.leader" placeholder="请输入事件创始人"></a-input>
          </a-form-model-item>
        </a-col> -->
        <!-- <a-col :span="12">
          <a-form-model-item label="数据快照频率" prop="snapshot">
            <a-input v-model.lazy="form.snapshot" :maxLength="50" placeholder="请输入数据快照频率"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="创建时间">
            <span style="font-size: 16px">{{ moment(new Date()).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </a-form-model-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-model-item label="事件链接" prop="link" class="custom-label">
            <a-input v-model="form.link" placeholder="请输入事件链接"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="事件类型" prop="typeId" class="custom-label">
            <a-select placeholder="请选择事件类型" v-model="form.typeId">
              <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-model-item>

        </a-col>

        <a-col :span="24">
          <a-form-model-item label="事件截图" prop="">
            <UploadImageMutil
              ref="image"
              text="上传图片"
              :length="1"
              @getUrl="addEventImg"
              style="margin-right: 12px" />
          </a-form-model-item>

        </a-col>
        <!-- <a-col :span="12">
          <a-form-model-item label="是否下发指令" prop="isSend">
            <a-radio-group buttonStyle="solid" v-model.lazy="form.isSend">
              <a-radio-button :value="1">是</a-radio-button>
              <a-radio-button :value="0">否</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="showMB">
          <a-form-model-item label="指令模板">
            <a-select v-model.lazy="form.template" placeholder="请选择指令模板" @change="getTemplate">
              <a-select-option :value="item.id" v-for="item in list" :key="item.id">{{ item.mainTitle }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="指令内容" prop="askContent">
            <a-textarea v-model.lazy="form.askContent" placeholder="请输入指令内容" :rows="3"></a-textarea>
          </a-form-model-item>
        </a-col> -->
        <a-col :span="24">
          <a-form-model-item label="领导指示">
            <a-select style="width: 100%" placeholder="请选择领导指示" v-model="form.leader">
              <a-select-option v-for="item in (leader || [])" :key="item.realName || item.realname || 'l'" :value="item.realName || item.realname">
                {{ item.realName || item.realname }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="指示内容">
            <a-textarea v-model.lazy="form.leaderContent" placeholder="请输入指示内容" :rows="3"></a-textarea>
          </a-form-model-item>
        </a-col>

        <CreateLeaderOrderEvent :formData="form" @change="changeOrderEvent" />

      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { deptList, getDepartByIsOut } from '@/api/dept';
import { createEvent, eventTypeId, getAddressType, getOrderTemplatePageList, getDivisionHead, getOrderTemplate, getAllPossession, getTodayDutyLeader } from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';
import CreateLeaderOrderEvent from '../../detail/createLeaderOrderEvent';
import UploadImageMutil from '@/components/UploadImageMutil';

const defaultForm = {
  isOnline: 0,
  isSend: 1,
  eventType: 0,
  // transactStatus: 0,
  // eventLevel: 0,
  eventGrade: 0,
  departIdList: [],
  typeId: '',
  address: '',
  handleType: 0,
  mobile: '',
  link: ''
};

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    showMB: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  components: {
    CreateLeaderOrderEvent,
    UploadImageMutil
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    },
    dept(val) {
      this.form.departIdList = val.join(',');
    }
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      moment,
      show: false,
      address: [],
      deptArr: [],
      deptArrOut: [],
      dept: [],
      departIdListIn: [],
      departIdListOut: [],
      form: cloneDeep(defaultForm),
      typeList: [],
      list: [],
      leader: [],
      rules: {
        eventType: [{ required: true, message: '请选择' }],
        title: [{ required: true, message: '请输入' }],
        isOnline: [{ required: true, message: '请输入' }],
        address: [{ required: true, message: '请输入' }],
        transactStatus: [{ required: true, message: '请输入' }],
        eventLevel: [{ required: true, message: '请输入' }],
        departIdList: [{ required: true, message: '请输入' }],
        eventGrade: [{ required: true, message: '请输入' }],
        snapshot: [{ required: true, message: '请输入' }],
        isSend: [{ required: true, message: '请输入' }],
        askContent: [{ required: true, message: '请输入' }],
        leader: [{ required: true, message: '请输入' }],
        leaderContent: [{ required: true, message: '请输入' }],
        content: [{ required: true, message: '请输入' }],
        typeId: [{ required: true, message: '请选择' }],
        link: [{ required: true, message: '请输入' }],
        mobile: [{ required: true, message: '请选择' }]
        // link: [{ required: true, message: '请输入' }]
      }
    };
  },
  created() {
    const path = this.$route.path;
    if (path == '/home/danger') {
      this.form.handleType = 1;
      defaultForm.handleType = 1;
    }
    console.log(this.$route.path, '[this.$route.path]');
    deptList({
      pageNo: 1,
      pageSize: 1000
    }).then(res => {
      this.deptArr = res.data.records.map(e => {
        return {
          label: e.depart,
          value: e.id
        };
      });
    });
    eventTypeId().then(res => {
      this.typeList = res.data;
    });
    this.getOrderTemplatePageList();
    this.getAddress();
    this.getDept();
    this.getLeader();
  },
  methods: {
    getDept() {
      getDepartByIsOut({
        isOut: 0
        // eventId: this.id,
        // ...this.params
      }).then(res => {
        // this.config.dataSource = res.data;
        this.deptArr = res.data;
      });
      getDepartByIsOut({
        isOut: 1
        // eventId: this.id,
        // ...this.params
      }).then(res => {
        this.deptArrOut = res.data;
      });
    },
    getLeader() {
      getDivisionHead().then(res => {
        console.log('[getDivisionHead]', res);
        this.leader = res.data || [];
        getTodayDutyLeader().then(res => {
          console.log('getTodayDutyLeader', res);
          this.form.mobile = res.data ? [res.data.mobile] : [];
        });
      });
    },
    getAddress() {
      getAllPossession().then(res => {
        this.address = res.data;
      });
    },
    getTemplate(e) {
      console.log(e);
      getOrderTemplate({
        id: e
      }).then(res => {
        // this.form.askContent =
        this.$set(this.form, 'askContent', res.data.instruction);
      });
    },
    getOrderTemplatePageList() {
      getOrderTemplatePageList({
        pageNo: 1,
        pageSize: 10000
      }).then(res => {
        this.list = res.data.records.map(e => {
          return {
            ...e
          };
        });
      });
    },
    createEvents() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // this.form.departIdList = this.departIdListIn.concat(this.departIdListOut);
          const form = cloneDeep(this.form);
          form.mobile = form.mobile.join(',');
          createEvent(form).then(res => {
            this.$message.success('创建成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep(defaultForm);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    blurTitle() {
      getAddressType({
        title: this.form.title || ''
      }).then(res => {
        this.form.typeId = String(res.data.typeId);
        this.form.address = res.data.title;
      });
    },
    changeOrderEvent(form) {
      console.log('change', form);
      Object.assign(this.form, form);
      console.log(this.form);
    },
    addEventImg(url) {
      this.form.img = url;
    }
  }
};
</script>

<style>
.custom-label .ant-form-item-label {
  width: 25%; /* 设置你想要的宽度 */
  text-align: left; /* 标签的对齐方式 */
}
.custom-label .ant-form-item-control-wrapper {
  width: 75%; /* 设置你想要的宽度 */
}
</style>
